import {View, Text, StyleSheet, TouchableOpacity, ViewStyle, Linking} from 'react-native'
import React, {Component} from 'react'
import styles, {padding, rectWithSize} from "../../style";
import {AppIcon} from "../../assets/icon/AppIcon";
import DetailModal from "../page/primary/productDetail/detailModal";
import {Actions} from "react-native-router-flux";
import toast from "../common/ToastProxy";
import LoveCollect from "./LoveCollect";
import ProductStoreInstance, {ProductStore} from "../../store/modules/main/product";
import {inject, observer} from "mobx-react/custom";
import {Store} from "../../store";


interface ShopToolBarProps extends Store{
    style?: ViewStyle,
    buyHandle: (flag: BuyFlag) => () => void,
    productId?: number
}

interface ShopToolBarState {

}

export enum BuyFlag {
    Buy, Cert
}
@inject("product")
@observer
export default class ShopToolBar extends Component<ShopToolBarProps, ShopToolBarState> {

    product: ProductStore;

    constructor(props: ShopToolBarProps) {
        super(props);
        this.product = props.product;
    }

    goShopCert() {
        Actions.push("Cert_NavCard");
    }

    collect = async (flag: boolean) => {
        if (this.props.productId) {
            const resFlag = await this.product.collectProduct(this.props.productId,flag);
            resFlag && global.showSuccess("收藏成功!");
        }

    };


    concatCustomerService() {
        Linking.canOpenURL("tel:051588371022").then(supported => {
            if (!supported) {
                toast("不支持拨打电话");
            } else {
                return Linking.openURL("tel:051588371022");
            }
        }).catch(err => toast("不支持拨打电话"));

    }


    render() {
        const {style, buyHandle} = this.props;
        const isChecked = !!this.product.userProductRelation.collect;
        console.log(this.product.userProductRelation.collect);
        console.log(isChecked);
        const toolBtnGroup = [
            {label: "购物车", icon: "xiangqingyegouwuche", onPress: this.goShopCert},
            {label: "收藏", icon: "love-b", onCheck: this.collect},
            {label: "客服", icon: "kefu", onPress: this.concatCustomerService}];
        return (<View style={[style, styles.flexDirectionRowNotFlex]}>
            <View style={[styles.flexDirectionRow]}>
                {toolBtnGroup.map(({label, icon, onPress, onCheck}, index) => {
                    return (
                        index === 1 ? <LoveCollect onCheck={onCheck}
                                                   checked={isChecked}
                                                   style={[styles.flex, styles.centered]} key={label}
                                                   label={label}/> :
                            <TouchableOpacity activeOpacity={.7} onPress={onPress}
                                              style={[styles.flex, styles.centered]}
                                              key={label}>
                                <AppIcon name={icon} size={18} color={"#B0B0B0"}/>
                                <Text style={{fontSize: 11, color: "#9B9B9B", marginTop: 3}}>
                                    {label}
                                </Text>
                            </TouchableOpacity>

                    )
                })}
            </View>
            <TouchableOpacity activeOpacity={.7} onPress={buyHandle(BuyFlag.Cert)}
                              style={[styles.centered, padding(15, 16), {backgroundColor: "rgba(170, 209, 140, 0.8)"}]}>
                <Text style={{fontSize: 14, color: "#FFFFFF"}}>加入购物车</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={buyHandle(BuyFlag.Buy)}
                              style={[styles.centered, padding(15, 16), {backgroundColor: "#629C36"}]}>
                <Text style={{fontSize: 14, color: "#FFFFFF"}}>立即购买</Text>
            </TouchableOpacity>
        </View>)
    }
}

const style = StyleSheet.create({
    container: {}
});

 